
import React from 'react';
import TabNavigator from 'react-native-tab-navigator';

import {
    View,
    StyleSheet,
    Image,
    StatusBar
} from 'react-native';

import HomePage from './pages/HomePage';
import OrderPage from './pages/OrderPage';
import MinePage from './pages/MinePage';

var _navigation = null

export default class Root extends React.Component {

    static navigationOptions = ({ navigation }) => ({
        headerStyle: {
            height: 0,
        }
    })

    constructor(props) {
        super(props);
        this.state = {
            selectedTab: '首页'
        };

        _navigation = props.navigation
    }

    render() {
        return (
            <View style={styles.container} >
                <StatusBar translucent={true} backgroundColor={'rgba(0,0,0,0)'} barStyle={'dark-content'}/>
                <TabNavigator tabBarStyle={styles.tab}>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === '首页'}
                        title="首页"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Image source={require('../assets/images/i_home.png')} style={styles.icon} />}
                        renderSelectedIcon={() => <Image style={styles.icon} source={require('../assets/images/i_home_foc.png')} />}
                        onPress={() => this.setState({ selectedTab: '首页' })}>
                        <HomePage navigation={_navigation}/>
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === '订单'}
                        title="订单"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Image source={require('../assets/images/i_live.png')} style={styles.icon} />}
                        renderSelectedIcon={() => <Image style={styles.icon} source={require('../assets/images/i_live_foc.png')} />}
                        onPress={() => this.setState({ selectedTab: '订单' })}>
                        <OrderPage navigation={_navigation}/>
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === '我的'}
                        title="我的"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Image source={require('../assets/images/i_mine.png')} style={styles.icon} />}
                        renderSelectedIcon={() => <Image style={styles.icon} source={require('../assets/images/i_mine_foc.png')} />}
                        onPress={() => this.setState({ selectedTab: '我的' })}>
                        <MinePage navigation={_navigation}/>
                    </TabNavigator.Item>
                </TabNavigator>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    tab: {
        height: 48,
        backgroundColor: '#f5f5f5',
        alignItems: 'center'
    },
    tabText: {
        marginTop: 1,
        color: '#333',
        fontSize: 11
    },
    selectedTabText: {
        marginTop: 1,
        color: '#FFD700',
        fontSize: 11
    },
    icon: {
        width: 20,
        height: 20,
        resizeMode: 'stretch',
        marginTop: 5
    }
});

